<template>
  <div class="contain">
    <el-container>
      <el-header>
        <h4>试题录入</h4>
        <hr />
      </el-header>
      <el-main>
        <el-form :model="formInline" class="demo-dynamic" label-width="80px" :rules="rules" ref="form">
          <el-form-item label="学科" prop="subjectID">
            <el-select v-model="formInline.subjectID" placeholder="请选择">
              <el-option
                :label="item.label"
                :value="item.value"
                v-for="item in info_subjectID"
                :key="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="目录" prop="catalogID">
            <el-select
              v-model="formInline.catalogID"
              placeholder="请选择"
            >
              <el-option
                label="选择"
                :value="1"
              ></el-option>
            </el-select>
          </el-form-item >
          <el-form-item label="企业" prop='enterpriseID'>
            <el-select v-model="formInline.enterpriseID" placeholder="请选择">
              <el-option
                :label="item.company"
                :value="item.id"
                v-for="item in info_enterpriseID"
                :key="item.value"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-row :gutter="20">
            <el-col :span="6"
              ><div class="grid-content bg-purple">
                <el-form-item label="城市" prop='province'>
                  <el-select
                    v-model="formInline.province"
                    placeholder="请选择"
                    class="city_width"
                    @click.native="el_select_province"
                  >
                    <el-option
                      :label="item.city"
                      :value="item.city"
                      v-for="(item, index) in datas"
                      :key="index"
                    ></el-option>
                  </el-select>
                </el-form-item></div
            ></el-col>
            <el-col :span="6"
              ><div class="grid-content bg-purple">
                <el-form-item prop="city">
                  <el-select
                    v-model="formInline.city"
                    placeholder="请选择"
                    class="city_width"
                    @click.native="el_select_city"
                  >
                    <el-option
                      :label="item"
                      :value="item"
                      v-for="(item, index) in info_city"
                      :key="index"
                    ></el-option>
                  </el-select>
                </el-form-item></div
            ></el-col>
          </el-row>

          <el-form-item label="方向" prop="direction">
            <el-select v-model="formInline.direction" placeholder="请选择">
              <el-option label="o2o" value="o2o"></el-option>
              <el-option label="外包服务" value="外包服务"></el-option>
              <el-option label="企业服务" value="企业服务"></el-option>
              <el-option label="互联网金融" value="互联网金融"></el-option>
              <el-option label="企业咨询" value="企业咨询"></el-option>
              <el-option label="互联网" value="互联网"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="题型" prop="questionType">
            <el-radio-group v-model="formInline.questionType">
              <el-radio label="1" >单选</el-radio>
              <el-radio label="2" >多选</el-radio>
              <el-radio label="3" >简答</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="难度" prop="difficulty">
            <el-radio-group v-model="formInline.difficulty">
              <el-radio label="1" >单选</el-radio>
              <el-radio label="2" >一般</el-radio>
              <el-radio label="3" >困难</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="题干" prop="question">
            <quillEditor
              v-model="formInline.question"
              @blur="$refs.form.validateField('content')"
            ></quillEditor>
          </el-form-item>
          <el-form-item label="选项">
            <el-radio-group
              v-model="formInline.questionType"
              class="flex_radio"
            >
              <p class="p_img">
                <el-radio :label="1"
                  >A:<el-input placeholder="请输入内容"></el-input>
                  <el-button disabled>默认按钮</el-button>
                </el-radio>
              </p>
              <p class="p_img">
                <el-radio :label="2"
                  >B:<el-input placeholder="请输入内容"></el-input>
                  <el-button disabled>默认按钮</el-button>
                </el-radio>
              </p>
              <p class="p_img">
                <el-radio :label="3"
                  >C:<el-input placeholder="请输入内容"></el-input>
                  <el-button disabled>默认按钮</el-button>
                </el-radio>
              </p>
              <p class="p_img">
                <el-radio :label="4"
                  >D:<el-input placeholder="请输入内容"></el-input>
                  <el-button disabled>默认按钮</el-button>
                </el-radio>
              </p>
              <p class="p_btn">
                <el-button type="danger" plain disabled
                  >+增加选项和答案</el-button
                >
              </p>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="视频解析">
            <el-input
              v-model="formInline.videoURL"
              autocomplete="off"
              class="el_input_width"
            ></el-input>
          </el-form-item>
          <el-form-item label="答案解析" prop="answer">
            <quillEditor
              v-model="formInline.answer"
              @blur="$refs.form.validateField('answer')"
            ></quillEditor>
          </el-form-item>
          <el-form-item label="题目备注">
            <el-input
              type="textarea"
              :rows="4"
              placeholder="请输入内容"
              v-model="formInline.textarea"
              class="el_input_width"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="试题标签">
            <el-select
              v-model="formInline.tags"
              placeholder="请选择"
              @click.native="tag_list"
            >
              <el-option
                :label="item.label"
                :value="item.value"
                v-for="item in tag"
                :key="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="basicsSubmit">立即提交</el-button>
          </el-form-item>
        </el-form>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { datas } from '@/api/hmmm/citys.js'
import { simple } from '@/api/hmmm/subjects.js'
// import { simpleTwo } from '@/api/hmmm/directorys.js'
import { list } from '@/api/hmmm/companys.js'
import { simples } from '@/api/hmmm/tags.js'
import { add } from '@/api/hmmm/questions.js'

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
export default {
  components: {
    quillEditor
  },
  data () {
    return {
      formInline: {
        subjectID: '',
        catalogID: '',
        enterpriseID: '',
        questionType: '',
        difficulty: '',
        answer: '',
        textarea: '',
        tags: '',
        province: '',
        city: '',
        question: '',
        options: []
      },
      rules: {
        subjectID: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ],
        catalogID: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ],
        enterpriseID: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ],
        province: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ],
        direction: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ],
        city: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ],
        questionType: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ],
        difficulty: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ],
        question: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ],
        answer: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ]
      },
      info_city: null,
      datas: null,
      info_subjectID: '',
      subjectID_list: '',
      info_enterpriseID: '',
      radio: 1,
      tag: ''
    }
  },
  async created () {
    const { data } = await simple()
    this.info_subjectID = data
    const dataes = await list(this.queryObj)
    this.info_enterpriseID = dataes.data.items
  },
  methods: {
    // 基础题库新增
    async basicsSubmit () {
      await this.$refs.form.validate()
      const data = await add(this.formInline)
      console.log(data)
      this.$router.push('/questions/list')
    },
    el_select_province () {
      this.datas = datas
    },
    el_select_city () {
      const data = datas.filter(item => item.city === this.formInline.province)
      this.info_city = data[0]?.area
    },
    // async twoprovince_list () {
    //   const { data } = await simpleTwo(this.formInline.subjectID)
    //   console.log(data)
    //   this.subjectID_list = data
    // },
    async tag_list () {
      const { data } = await simples(this.formInline.subjectID)
      console.log(1)
      console.log(data)
      this.tag = data
    }
  }
}
</script>

<style scoped lang="less">
.contain {
  background-color: #fff;
  padding: 20px;
  margin-left: 15px;
  margin-top: 15px;
}
.two_city {
  margin-left: 40px;
}
.flex_city {
  display: inline-block;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
::v-deep .ql-editor {
  height: 200px;
  margin-left: 30px;
}
.p_btn {
  margin-top: 20px;
}
::v-deep .p_img {
  margin-top: 10px;
  .el-input {
    margin: 0 10px;
  }
}
.el_input_width {
  width: 300px;
}
</style>
